<template>
    <div class="screen-container" :style="containerStyle">
        <header class="screen-header">
            <div>
                <img src="/static/img/header_border_dark.png" alt="">
            </div>
            <span class="title">基于大数据的睡眠质量数据可视化</span>
            <div id="qiehuan" class="title-right">
                <span class="datetime">当前时间：{{ newTime }}</span>
            </div>
        </header>
        <div class="screen-body">

            <section class="screen-left">
                <div id="left-top" :class="[fullScreenStatus.SleepLevel ? 'fullscreen' : '']">
                    <SleepLevel ref="SleepLevel"></SleepLevel>
                    <div class="resize">
                        <span @click="changeSize('SleepLevel')"
                            :class="['iconfont', fullScreenStatus.SleepLevel ? 'icon-suoxiao' : 'icon-fangda']"></span>
                    </div>
                </div>
                <div id="left-bottom" :class="[fullScreenStatus.SleepQuality ? 'fullscreen' : '']">
                    <!-- 职业与睡眠时长条形图 -->
                    <SleepQuality ref="SleepQuality"></SleepQuality>
                    <div class="resize">
                        <span @click="changeSize('SleepQuality')"
                            :class="['iconfont', fullScreenStatus.SleepQuality ? 'icon-suoxiao' : 'icon-fangda']"></span>
                    </div>
                </div>
            </section>

            <section class="screen-middle">
                <div id="middle-top" :class="[fullScreenStatus.SleepDisorder ? 'fullscreen' : '']">
                    <!-- 睡眠障碍分布情况矩形树图 -->
                    <SleepDisorder ref="SleepDisorder"></SleepDisorder>
                    <div class="resize">
                        <span @click="changeSize('SleepDisorder')"
                            :class="['iconfont', fullScreenStatus.SleepDisorder ? 'icon-suoxiao' : 'icon-fangda']"></span>
                    </div>
                </div>
                <div id="middle-bottom" :class="[fullScreenStatus.DailySteps ? 'fullscreen' : '']">
                    <!-- 每日步数与睡眠持续时间柱状图 -->
                    <DailySteps ref="DailySteps"></DailySteps>
                    <div class="resize">
                        <span @click="changeSize('DailySteps')"
                            :class="['iconfont', fullScreenStatus.DailySteps ? 'icon-suoxiao' : 'icon-fangda']"></span>
                    </div>
                </div>
            </section>

            <section class="screen-right">
                <div id="right-top" :class="[fullScreenStatus.BMI ? 'fullscreen' : '']">
                    <!-- 人员BMI分类饼图 -->
                    <BMI ref="BMI"></BMI>
                    <div class="resize">
                        <span @click="changeSize('BMI')"
                            :class="['iconfont', fullScreenStatus.BMI ? 'icon-suoxiao' : 'icon-fangda']"></span>
                    </div>
                </div>
                <div id="right-bottom" :class="[fullScreenStatus.SleepAge ? 'fullscreen' : '']">
                    <!-- 年龄与睡眠质量折线图 -->
                    <SleepAge ref="SleepAge"></SleepAge>
                    <div class="resize">
                        <span @click="changeSize('SleepAge')"
                            :class="['iconfont', fullScreenStatus.SleepAge ? 'icon-suoxiao' : 'icon-fangda']"></span>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>

<script>
import BMI from '@/components/BMI.vue'
import DailySteps from '@/components/DailySteps.vue'
import SleepAge from '@/components/SleepAge.vue'
import SleepQuality from '@/components/SleepQuality.vue'
import SleepDisorder from '@/components/SleepDisoder.vue'
import SleepLevel from '@/components/StressLevel.vue'

export default {
    data() {
        return {
            newTime:'',
            // 定义每一个图表的全屏状态
            fullScreenStatus: {
                BMI: false,
                DailySteps: false,
                SleepAge: false,
                SleepQuality: false,
                SleepDisorder: false,
                SleepLevel: false,
            }
        }
    },
    mounted(){
        this.getNowTime();//进入页面调用该方法获取当前时间
        clearInterval(myTimeDisplay );//销毁之前定时器
        var myTimeDisplay = setInterval(() => {
           this.getNowTime(); //每秒更新一次时间
        }, 1000);    
    },
    methods: {
        getNowTime(){
            var date = new Date();
            var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
            this.newTime = time;
        },
        //根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
        //小于10的拼接上0字符串
        addZero(s) {
            return s < 10 ? ('0' + s) : s;
        },
        changeSize(chartName) {
            console.log('chartName:', chartName);
            console.log('this.$refs:', this.$refs);
            console.log('this.fullScreenStatus[chartName]:', [this.fullScreenStatus[chartName] ? 'fullscreen' : '']);
            // 1.改变fullScreenStatus的数据
            this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName]
            console.log('this.fullScreenStatus[chartName]:', [this.fullScreenStatus[chartName] ? 'fullscreen' : '']);
            console.log('this.$refs[chartName]:', this.$refs[chartName]);
            // 2.需要调用每一个图表组件的screenAdapter的方法
            this.$nextTick(() => {
                if (this.$refs[chartName] && typeof this.$refs[chartName].screenAdapter === 'function') {
                    this.$refs[chartName].screenAdapter();
                }
            })
        },
        
    },
    components: {
        BMI,
        DailySteps,
        SleepAge,
        SleepQuality,
        SleepDisorder,
        SleepLevel,
    }
}

</script>

<style scoped>
/* 全屏样式的定义 */
.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 100;
}

.screen-container {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    /* background-color: #161522;  */
    background-color: rgb(7, 2, 34); 
    color: #fff;
    box-sizing: border-box;
}

.screen-header {
    width: 100%;
    height: 64px;
    font-size: 20px;
    position: relative;
}

.screen-header>div img {
    width: 100%;
}

.screen-header .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
}

.screen-header .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
}

.screen-header .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
}

.screen-header .datetime {
    font-size: 15px;
    margin-left: 10px;
}

.screen-header .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
}

.screen-header .logo img {
    height: 35px;
    width: 128px;
}

.screen-body {
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 10px;
}

.screen-body .screen-left {
    height: 100%;
    width: 27.6%;
}

.screen-body .screen-left #left-top {
    height: 53%;
    position: relative;
}

.screen-body .screen-left #left-bottom {
    height: 31%;
    margin-top: 25px;
    position: relative;
}

.screen-body .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
}

.screen-body .screen-middle #middle-top {
    width: 100%;
    height: 56%;
    position: relative;
}

.screen-body .screen-middle #middle-bottom {
    margin-top: 25px;
    width: 100%;
    height: 28%;
    position: relative;
}

.screen-body .screen-right {
    height: 100%;
    width: 27.6%;
}

.screen-body .screen-right #right-top {
    height: 46%;
    position: relative;
}

.screen-body .screen-right #right-bottom {
    height: 38%;
    margin-top: 25px;
    position: relative;
}

.resize {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}

</style>